<template>
  <div class="app-container">
    <div class="filter-div">
      <el-input
        v-model="listQuery.id"
        placeholder="订单ID"
        style="width: 190px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.storeId"
        placeholder="店铺ID"
        style="width: 120px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.storeName"
        placeholder="店铺名称"
        style="width: 120px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.price"
        placeholder="价格"
        style="width: 120px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-date-picker
        v-model="listQuery.datetime"
        type="datetimerange"
        align="right"
        unlink-panels
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :picker-options="pickerOptions"
        @change="handleFilter"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      border
      size="mini"
      :data="list"
      max-height="500px"
      style="width: 100%;"
    >
      <el-table-column label="订单号" prop="id" align="center" min-width="18%">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="价格" align="center" min-width="10%">
        <template slot-scope="{row}">
          <span>{{ row.price / 100 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品ID" align="center" min-width="16%">
        <template slot-scope="{row}">
          <span>{{ row.goods_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商店ID" align="center" min-width="14%">
        <template slot-scope="{row}">
          <span>{{ row.store_id }}</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="商店名称" min-width="14%" align="center">
        <template slot-scope="{row}">
          <span>{{ row.store_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属用户" min-width="12%" align="center">
        <template slot-scope="{row}">
          <span>{{ row.user_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="时间" min-width="16%" align="center">
        <template slot-scope="{row}">
          <span>{{ row.pay_time }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="handleFilter"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getList } from '@/api/order'
import { parseTime } from '@/utils'
export default {
  name: 'OrderList',
  components: { Pagination },
  data() {
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24)
    const startTime = parseTime(start)
    const endTime = parseTime(new Date())
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '最近三天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      listLoading: false,
      total: 0,
      list: [],
      listQuery: {
        id: '',
        datetime: [startTime, endTime],
        price: '',
        storeId: '',
        storeName: '',
        page: 1,
        limit: 20
      }
    }
  },
  created() {
    this.handleFilter()
  },
  methods: {
    handleFilter() {
      this.listLoading = true
      const { id, datetime, price, storeId, storeName, page, limit } = this.listQuery
      const query = { id, storeId, storeName, page, limit, price: price * 100 }
      query.startTime = datetime[0]
      query.endTime = datetime[1]
      getList(query).then(response => {
        this.list = response.data.list
        this.list = response.data.list.map(item => {
          item.create_time = parseTime(item.create_time)
          item.pay_time = item.pay_time ? parseTime(item.pay_time) : '-'
          return item
        })
        this.total = response.data.total
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>
    .filter-div{
        padding-bottom: 20px;
    }
</style>
<style >
  /* .el-table .success-row {
        background: #F0F9EB;
    }
  .el-table  .warning-row {
        background: #F5DEB3;
    } */
</style>
